<template>
	<div id="history_box">
		<fui-divider text="搜索历史" dividerColor="#FFB703 " width="600rpx" color="#FFB703"></fui-divider>

		<fui-row margin-bottom="24rpx">
			<fui-col :span="6" :offset="1" v-for="item in historyList" :key="item.search_name">

				<div>
					<view class="fui-block"></view>

					<fui-tag :text=item.search_name type="success" theme="plain" @click="historyDialogInfo(item)"></fui-tag>
					<view class="fui-block"></view>
				</div>
			</fui-col>

		</fui-row>
		<!-- 全屏 -->
		<fui-backdrop :show="show" closable :absolute="false">
			<div v-if="visible" class="full_screen">
				<div class="close" @click="close">
					<image src="../../static/icon/close.png" mode="" style="width: 30px; height: 30px;"></image>
				</div>
				<text>{{content}}</text>
			</div>
		</fui-backdrop>
		<fui-divider text="没有更多了"></fui-divider>


	</div>
</template>

<script>
	import {
		httpRequest
	} from '../../utils/request.js'
	export default {
		components: {

		},
		data() {
			return {
				historyList: [],
				visible: false,
				show: false,
				content: "",
				curPageNum: 0,
				totalNum: 10
			}
		},
		methods: {
			GetSearchAll() {
				httpRequest("/api/search", "GET").then((res) => {

					this.$store.commit("SetHistoryInfo", res)
					this.historyList = this.$store.state.history
				}).catch(err => {

					uni.showToast({
						icon: 'error',
						title: err,
						position: 'center',
						duration: 1500
					})
				})
			},
			historyDialogInfo(item) {
				this.show = true
				this.visible = true

				this.content = item.search_content
			},
			close() {
				this.show = false
				this.visible = false
			},


		},
		mounted() {
			this.GetSearchAll()
		},
		onShow() {
			this.GetSearchAll()
		}
	}
</script>
<style>
	#history_box {
		margin: 0 auto;
		position: relative;
	}

	.fui-block {
		width: 100%;
		height: 40rpx;
		background-color: #fff;
	}

	.full_screen {
		width: 89%;
		height: 550px;
		background: rgb(124, 195, 98);
		opacity: 0.8;
		max-height: 550px;
		border-radius: 6px;
		overflow: auto;
		/* padding: 0 20rpx; */
		font-size: 17px;
		padding-bottom: 15rpx;
	}

	.close {
		position: fixed;
		/* margin-top: 10rpx; */

		right: 45rpx;
	}
</style>